<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/18 0018
  Time: 14:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>产品I级分类设置</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap-5.3.3-dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/ProductDesign/product_archives_query.css" />
    <link rel="stylesheet" href="/css/ProductDesign/product_level_I.css">

</head>
<body>
<div class="panel product">
    <div class="panel-heading hhead">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <span style="color: blue;">您正在做的业务是：</span>
                <li class="breadcrumb-item"><a href="#">客户化设置</a></li>
                <li class="breadcrumb-item active" aria-current="page"><a href="">产品档案管理设置</a></li>
                <li class="breadcrumb-item active" aria-current="page">产品I级分类设置</li>
            </ol>
        </nav>

    </div>
    <div style="margin-bottom: 2px">
        <div style="display: inline;margin-left: 88%;">
            <button class="btn btn-primary" id="btnAdd" data-bs-toggle="modal" data-bs-target="#levelFirstModal">添加</button>
            <button class="btn btn-primary" id="btnDelete">删除</button>
        </div>
    </div>

    <div class="panel-body bbody">
        <table id="tab" >
            <thead>
                <tr style="background-color: #e8e8e8;">
                    <th></th>
                    <th class="col1">产品I级分类编号</th>
                    <th class="col2">产品I级分类名称</th>
                </tr>
            </thead>
            <tbody id="template" style="display: none">
                <tr>
                    <td class="id"><input class="levelID" type="checkbox"/></td>
                    <td class="firstId"></td>
                    <td class="firstName"></td>
                </tr>
            </tbody>
            <tbody id="levelITbl">

            </tbody>
        </table>
    </div>

    <div class="panel-footer ffooter">
        <div id="footerDiv">
            <label style="font-weight: 700;">总数：<span style="color: red;">5</span>例&nbsp;&nbsp;&nbsp;&nbsp;
                当前第<span style="color: red;">1</span>页&nbsp;&nbsp;&nbsp;&nbsp;
                共<span style="color: red;">1</span>页&nbsp;&nbsp;&nbsp;&nbsp;
            </label>
        </div>

    </div>
</div>

<div class="modal fade" id="levelFirstModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="staticBackdropLabel">添加产品I级分类</h3>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <form class="form-horizontal" id="firstForm">
                        <div class="row">
                            <label class="control-label col-sm-4">产品I级分类名称:</label>
                            <div class="col-sm-8 bs-popover-auto">
                                <input name="firstName" class="form-control" />
                            </div>
                        </div>

                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btnOK" class="btn btn-success">
                    确定<span class="glyphicon glyphicon-ok"></span>
                </button>

                <button id="btnConcel" class="btn btn-danger" data-bs-dismiss="modal">
                    取消<span class="glyphicon glyphicon-remove"></span>
                </button>
            </div>
        </div>
    </div>
</div>


<script type="text/javascript" src="/js/jquery-3.7.0.min.js"></script>
<script type="text/javascript" src="/bootstrap/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript">
    $(function () {
        //初始化页面
        initLevelI();

        //添加
        $("#btnOK").click(function () {
            let jsonStr = formDateToJson("firstForm");
            console.log(jsonStr);
            $.ajax({
                url: "/d-level-first/insertFirst",
                type:"POST",
                data:jsonStr,
                contentType: "application/json",
                dataType:"json",
                success: function (flag) {
                    if (flag.errCode == "1") {
                        alert(flag.errMsg)
                    } else {
                        if(flag){
                            alert("添加成功");
                            $("#btnConcel").trigger("click");
                            initLevelI();
                        }else{
                            alert("系统错误")
                        }
                    }
                }
            })

        })

        //删除
        $("#btnDelete").click(function () {

        })
    })

    function initLevelI() {
        $.ajax({
            url: "/d-level-first/initialLevel",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data);
                $("#levelITbl").empty();
                let template = $("#template").children();

                $.each(data, function (i, levelI) {
                    let tr = template.clone();
                    $.each(levelI,function (name,value) {
                        if(name=="id"){
                            tr.find(".levelID").val(value);
                            tr.find(".levelID").attr("name",name);
                        }else{
                            tr.find("." + name).text(value);
                        }
                    })
                    $("#levelITbl").append(tr);
                })
            }
        })
    }
</script>
</body>
</html>
